﻿@page "/docs/components/check"

<Seo Canonical="/docs/components/check" Title="Blazorise Check component" Description="Learn to use and work with the Blazorise Check component, which provides users the ability to choose between two distinct values." />

<DocsPageTitle Path="Components/Check">
    Blazorise Check component
</DocsPageTitle>

<DocsPageLead>
    Check allow the user to toggle an option on or off.
</DocsPageLead>

<DocsPageParagraph>
    The <Code Tag>Check</Code> component provides users the ability to choose between two distinct values. These are very similar to a switch and can be used in complex forms and checklists. You can use this to supply a way for the user to toggle an option.
</DocsPageParagraph>

<DocsPageSection>
    <DocsPageSectionHeader Title="Check">
        Simple card
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <CheckExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="CheckExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="With name">
        This example showcases two Blazorise checkboxes linked to the same identifier, <Strong>CheckMeOut</Strong>. Both checkboxes contribute to the same data field upon submission when included in a form. This setup is ideal for grouping related choices under one name but requires careful data handling to distinguish between the choices on the server side.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <CheckWithNameExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="CheckWithNameExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Usage
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="With bind attribute">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <CheckWithBindExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="CheckWithBindExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="With event">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined>
        <CheckWithEventExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="CheckWithEventExample" />
</DocsPageSection>

<ComponentApiDocs ComponentTypes="[typeof(Check<>)]" />